<!--
 * Copyright © 2023
 * @Author: zhangxiang
 * @Date: 2023-05-12 17:06:56
 * @LastEditors: zhangxiang
 * @LastEditTime: 2023-07-21 18:05:22
 * @Description:
 *
-->

<template>
  <el-row class="cidr-wrapper" type="flex" align="middle">
    <el-input
      v-model="input1"
      style="flex: 1"
      size="medium"
      placeholder=""
      onkeyup="value=value.replace(/[^\d]/g, '')"
    />
    <span style="margin: 0 5px">.</span>
    <el-input
      v-model="input2"
      style="flex: 1"
      size="medium"
      placeholder=""
      onkeyup="value=value.replace(/[^\d]/g, '')"
    />
    <span style="margin: 0 5px">.</span>
    <el-input
      v-model="input3"
      style="flex: 1"
      size="medium"
      placeholder=""
      onkeyup="value=value.replace(/[^\d]/g, '')"
    />
    <span style="margin: 0 5px">.</span>
    <el-input
      v-model="input4"
      style="flex: 1"
      size="medium"
      placeholder=""
      onkeyup="value=value.replace(/[^\d]/g, '')"
    />
    <span style="margin: 0 5px">/</span>
    <el-input
      v-model="input5"
      style="flex: 1"
      size="medium"
      placeholder=""
      onkeyup="value=value.replace(/[^\d]/g, '')"
    />
    <el-popover placement="right" width="300" trigger="hover">
      <p v-html="explain"></p>
      <i
        slot="reference"
        class="el-icon-info icon"
        style="font-size: 18px; margin-left: 10px"
      ></i>
    </el-popover>
  </el-row>
</template>

<script>
export default {
  name: 'Cidr',
  components: {},
  mixins: [],
  props: {
    cidr: {
      type: String,
      default: ''
    },
    explain: {
      type: String,
      default:
        '子网网段必须是其所属网络网段的真子集且掩码需在16位到29位之间，可提供 8 ~ 65536 个地址。<br/>例如，网络的网段为192.168.0.0/16，则该网络下的子网网段为 192.168.0.0/17 ~ 192.168.0.0/29。'
    }
  },
  data() {
    return {
      input1: '',
      input2: '',
      input3: '',
      input4: '',
      input5: ''
    }
  },
  computed: {
    inputAll() {
      return {
        input1: this.input1,
        input2: this.input2,
        input3: this.input3,
        input4: this.input4,
        input5: this.input5
      }
    }
  },
  watch: {
    cidr: {
      handler(newVal) {
        if (newVal) {
          const arr1 = this.cidr.split('/')
          if (arr1.length > 1) {
            const arr2 = arr1[0].split('.')
            if (arr2.length === 4) {
              this.input1 = arr2[0]
              this.input2 = arr2[1]
              this.input3 = arr2[2]
              this.input4 = arr2[3]
              this.input5 = arr1[1]
            }
          }
        }
      },
      immediate: true,
      deep: true
    },
    inputAll: {
      handler(newVal) {
        this.$emit(
          'update:cidr',
          this.input1 +
            '.' +
            this.input2 +
            '.' +
            this.input3 +
            '.' +
            this.input4 +
            '/' +
            this.input5
        )
      },
      immediate: true,
      deep: true
    }
  },
  mounted() {},
  methods: {}
}
</script>

<style lang="less" scoped>
@import "@/assets/css/common.less";
.cidr-wrapper {
}
</style>
